import React from 'react'
import PropTypes from 'prop-types'
import { inject, observer } from 'mobx-react'
import Grid from '@material-ui/core/Grid'
import Paper from '@material-ui/core/Paper'
// import List from '@material-ui/core/List'
// import ListItem from '@material-ui/core/ListItem'
// import ListItemText from '@material-ui/core/ListItemText'
// import Avatar from '@material-ui/core/Avatar'
import Typography from '@material-ui/core/Typography'
import { withStyles } from '@material-ui/core/styles'
import infoStyles from './styles/user-info-style'
import UserWrapper from './user'

@inject(stores => ({
  appState: stores.appState,
  user: stores.appState.user,
}))
@observer
class Info extends React.Component {
  render() {
    const { classes } = this.props

    return (
      <UserWrapper>
        <div className={classes.root}>
          <Grid container spacing={16}>
            <Grid item xs={12} md={4}>
              <Paper elevation={2}>
                <Typography className={classes.partTitle}>
                  <span>最近发布的话题</span>
                </Typography>
              </Paper>
            </Grid>

            <Grid item xs={12} md={4}>
              <Paper elevation={2}>
                <Typography className={classes.partTitle}>
                  <span>新的回复</span>
                </Typography>
              </Paper>
            </Grid>

            <Grid item xs={12} md={4}>
              <Paper elevation={2}>
                <Typography className={classes.partTitle}>
                  <span>收藏的话题</span>
                </Typography>
              </Paper>
            </Grid>
          </Grid>
        </div>
      </UserWrapper>
    )
  }
}

Info.wrappedComponent.propTypes = {
  // appState: PropTypes.object.isRequired,
  // user: PropTypes.object.isRequired,
}

Info.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(infoStyles)(Info)
